﻿<!DOCTYPE html>
<html>
  <head>
    <!-- meta name="viewport" content="width=device-width, height=device-height, user-scalable=yes, initial-scale=2.0, maximum-scale=4.0, minimum-scale=1.0" / -->
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
    <title>Cordova</title>
    <link rel="stylesheet" href="master.css" type="text/css" media="screen"/>



    <script type="text/javascript" charset="utf-8" src="cordova-1.7.0.js"></script>


<script type="text/javascript" charset="utf-8">


  //-------------------------------------------------------------------------
  // Acceleration
  //-------------------------------------------------------------------------
  var watchAccelId = null;

  /**
  * Start watching acceleration
  */
  var watchAccel = function() {
  console.log("watchAccel()");

  if(watchAccelId)
  {
      return;
  }

  // Success callback
  var success = function (a) {
  document.getElementById("ball").style.left = parseInt(a.x * 100 + 100) + "px" ;
  document.getElementById("ball").style.top = parseInt(a.z * 100 + 100) + "px" ;

  };

  // Fail callback
  var fail = function(e){
  console.log("watchAccel fail callback with error code "+e);
  stopAccel();
  };

  // Update acceleration every 1 sec
  var opt = {};
  opt.frequency = 50;
  watchAccelId = navigator.accelerometer.watchAcceleration(onAccelData, fail, opt);

  setAccelStatus("Running");
  };


  var ballX = 0;
  var ballY = 0;
  var ballPixelsPerUpdate = 10;

  function onAccelData(a)
  {
  ballX += a.x * ballPixelsPerUpdate;
  ballY += a.z * ballPixelsPerUpdate;

  ballX = Math.max(ballX,0);
  ballX = Math.min(ballX,200);

  ballY = Math.max(ballY,0);
  ballY = Math.min(ballY,200);


  document.getElementById("ball").style.left = ballX + "px" ;
  document.getElementById("ball").style.top = ballY +  "px" ;
  }

  /**
  * Stop watching the acceleration
  */
  var stopAccel = function() {
  console.log("stopAccel()");
  if (watchAccelId) {
  navigator.accelerometer.clearWatch(watchAccelId);
  watchAccelId = null;
  }
  };


  /**
  * Function called when page has finished loading.
  */
  function init() {

  document.addEventListener("deviceready", function() {
  console.log("Device="+device.platform+" "+device.version);
  }, false);
  }

</script>

<style>
	#ball
	{
		position:relative;
		width:20px;
		height:20px;
		border-radius:10px;
		background-color:#FFF;
	}

	#playfield
	{
		position:absolute;
		left:50px;
		top:220px;
		width:220px;
		height:220px;
		background-color:#ff8800;
	}

	.dButton
	{
		width:80px;
		height:40px;
		display:inline;
		float:left;
		clear:none;
		border-style:solid;
		border-width:1px;
		border-radius:2px;
		line-height:40px;
	}

	.backBtnz
	{
		position:absolute;
		bottom:-20px;
	}
</style>

  </head>
  <body onLoad="init();" id="stage" class="theme">

    <div id="playfield">
    	<div id="ball">

        </div>
    </div>

    <h2>Actions</h2>

    <div class="dButton" onclick="watchAccel();">Start</div>
    <div class="dButton" onclick="stopAccel();">Stop</div>

    <div/>
    <a href="index.html" class="backBtn backBtnz">Back</a>
  </body>
</html>